<div class="header" >
   <img src="images/logo.png"  class="logo1" >
   <span>掌上植物鉴赏平台</span>
</div>
    <div id="slider" class="slider-wrapper"></div>
<div class="species">
    <nav class="nav mainpage-nav" id="scroll">
        <div class="mainpage-nav-in">
            <ul class="mainpage-nav-ul">
                <li id="one" class="mainpage-nav-li" ng-click="vm.articlefilter(0)"><span class="{{vm.navSpanClass[0]}}">最近更新</span></li>
                <li id="two" class="mainpage-nav-li" ng-click="vm.articlefilter(1)"><span class="{{vm.navSpanClass[1]}}" >幽静唯美</span></li>
                <li id="three" class="mainpage-nav-li" ng-click="vm.articlefilter(2)"><span class="{{vm.navSpanClass[2]}}" >花中萌物</span></li>
                <li id="four" class="mainpage-nav-li" ng-click="vm.articlefilter(3)"><span  class="{{vm.navSpanClass[3]}}">奇花异草</span></li>
                <li id="five" class="mainpage-nav-li" ng-click="vm.articlefilter(4)"><span class="{{vm.navSpanClass[4]}}">网友随拍</span></li>
                <li id="six" class="mainpage-nav-li" ng-click="vm.articlefilter(5)"><span class="{{vm.navSpanClass[5]}}">植物与人</span></li>
                <li id="eight" class="mainpage-nav-li" ng-click="vm.articlefilter(6)"><span class="{{vm.navSpanClass[6]}}">求鉴定</span></li>
            </ul>
        </div>
    </nav>
</div>
<div class="mainpage-articleshow">
    <div class="mainpage-articleshow-div" >
        <div class="mainpage-articlecontain" ng-repeat="article in vm.left track by $index" ng-click="vm.goDetails(article)">
            <img src="{{article.articlepic}}" class="mainpage-articleimg">
            <div>{{article.articlename}}</div>
            <div class="mainpage-articlecontain-auther">
                <div ><img src="{{article.photo}}" class="mainpage-articlecontain-photo">
                </div>
                <div class="mainpage-articlecontain-name">{{article.nickname}}</div>
            </div>
        </div>
    </div>
    <div class="mainpage-articleshow-div">
            <div class="mainpage-articlecontain" ng-repeat="article in vm.right track by $index"  ng-click="vm.goDetails(article)">
                <img src="{{article.articlepic}}" class="mainpage-articleimg">
                <div>{{article.articlename}}</div>

                <div class="mainpage-articlecontain-auther">
                    <div ><img src="{{article.photo}}" class="mainpage-articlecontain-photo">
                    </div>
                    <div class="mainpage-articlecontain-name">{{article.nickname}}</div>
                </div>
            </div>

    </div>
</div>


<div class="personal-tab">
    <div class="personal-tab-content"   ui-sref="mainpage">
        <span class="glyphicon glyphicon-home"></span>
        <div>主页</div>
    </div>
    <div class="personal-tab-content" style="color:darkgrey" ui-sref="knowledge" >
        <span class="glyphicon glyphicon-th-list" ></span>
        <div>百科</div>
    </div>
    <div class="personal-tab-content personal-out">
        <div style="border-radius: 50%;background-color:whitesmoke; width: 40%;
             margin-left: 30%;">
            <span class="glyphicon glyphicon-plus" style="color: black"ui-sref="addplant" ></span>
        </div>
    </div>
    <div class="personal-tab-content" style="color:darkgrey" ui-sref="collect">
        <span class="glyphicon glyphicon-paperclip"></span>
        <div>关注</div>
    </div>
    <div class="personal-tab-content" style="color:darkgrey" ui-sref="personalcenter">
        <span class="glyphicon glyphicon-user" ></span>
        <div>我的</div>
    </div>
</div>